<template>
  <view class="list-container">
    <view class="title mb-30 fz-32">
      {{ title }}
    </view>
    <view class="row">
      <uni-row gutter="20">
        <uni-col v-for="(item,index) in 4" :key="index" :span="colSpan">
          <view :class="colSpan==12? 'col br-16 mb-20':'cols mb-20'">
            <uni-row gutter="20">
              <uni-col :span="flexImgSpan">
                <cover-image :src="'/static/img/'+(index+1)+'.jpg'" class="br-16 wh-100 overflow"></cover-image>
              </uni-col>
              <uni-col :span="flexContentSpan" >
                <view :class="colSpan===12?'':'flex-column  b'">
                  <view class="content-title fz-28">
                    春风徐来，我在昆山 春风徐来，我在昆山 春风徐来，我在昆山
                  </view>
                  <view v-if="showContent" class="content fz-24">
                    春风徐来，我在昆山 春风徐来，我在昆山 春风徐来，我在昆山 春风徐来，我在昆山 春风徐来，我在昆山 春风徐来，我在昆山
                    春风徐来，我在昆山 春风徐来，我在昆山 春风徐来，我在昆山
                  </view>
                </view>
              </uni-col>
            </uni-row>
          </view>
        </uni-col>
      </uni-row>
    </view>
  </view>
</template>
<script>
export default {
  name: 'bl-list',
  props: {
    title: {
      type: String,
      default: ""
    },
    colSpan: {
      type: Number,

    },
    flexImgSpan: {
      type: Number,
      default: 24
    },
    flexContentSpan: {
      type: Number,
      default: 24
    },
    showContent: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  }
}

</script>
<style lang="scss" scoped>
.list-container {
  .title {
    position: relative;
    display: inline-block;
    font-weight: 400;

    &::before {
      position: absolute;
      bottom: -4rpx;
      left: 0;
      content: "";
      width: 40%;
      height: 5rpx;
      background: #28b98E;
      border-radius: 30rpx;
    }
  }

  .row {


    .col {
      width: 100%;
      aspect-ratio: 3/2;

    }

   .cols{
     width: 100%;
     aspect-ratio: 4/1;
   }

    .content-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .content {
      flex:1;
      color: #707070;
      border:1px solid red;
      display: -webkit-box; /* 必须结合 -webkit-box */
      -webkit-line-clamp: 3; /* 限制显示 3 行 */
      -webkit-box-orient: vertical; /* 垂直排列 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis;
    }
  }


}
</style>